<template>
	<div id="app">
		<canvas id="background"></canvas>
		<Navigation></Navigation>
		<router-view name="MainBanner">
		</router-view>
		<router-view name="SmallBanner">
		</router-view>
		<router-view name="Main"></router-view>
		<Footer></Footer>
	</div>
</template>

<script>
import Navigation from './components/Navigation.vue'
import Footer from './components/Footer.vue'
import './assets/js/background.min.js'

export default {
	name: 'App',
	components: {
		Navigation,
		Footer,
	}
}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;	
	}
	html,body {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		overflow-x: hidden;
		overflow-y: auto;
	}
	#background {
		position: fixed;
		top: 0;
		left: 0;
		filter: blur(30px);
		z-index: -100;
	}
	#app {
		width: 100%;
		height: 100%;
	}
	a {
		text-decoration: none;
		color: #039be5;
	}
	h1 {
		margin: 20px 0 50px 0px;
		font-size: 2.0rem;
		font-weight: bold;
		line-height: 2.0rem;
	}

	h2 {
		margin: 42px 0 18px -5px;
		font-size: 1.8rem;
		font-weight: bold;
		line-height: 1.8rem;
	}

	h3 {
		margin: 38px 0 15px -4px;
		font-size: 1.6rem;
		font-weight: bold;
		line-height: 1.7rem;
	}

	h4 {
		margin: 32px 0 12px -4px;
		font-size: 1.45rem;
		font-weight: bold;
		line-height: 1.45rem;
	}

	h5 {
		margin: 28px 0 8px -4px;
		font-size: 1.2rem;
		font-weight: bold;
		line-height: 1.2rem;
	}

	h6 {
		margin: 22px 0 4px -4px;
		font-size: 1.1rem;
		line-height: 1.1rem;
	}

	p {
		font-size: 1rem;
		line-height: 1.5rem;
	}

	hr {
		margin: 20px 0;
		border: 0;
		border-top: 1px solid #ccc;
	}
	.protrusion .card:hover {
		transform: scale(1.1);
	}
</style>
